<script setup lang="ts">
const props =  defineProps({
    money: {
      type: Number,
      default: 10
    },
    car: {
      type: String,
      default: '奔驰c'
    },
    modelValue: {
      type: Number,
      default: 10
    }
  })

  // vue2 
  // 子组件直接修改父组件传过来中的数据
  // .sync update
  // :属性名.sync= "属性值"
  // 父组件
  // <Son :money.sync="money"></Son>
  // 子组件
  // this.$emit('update:money', 值)

  // vue3 
  // v-model:属性名="属性值"
  // 取消了.sync修饰符
  // v-model替代了.sync修饰符

  const emit = defineEmits<{
    (e: 'update:money', value: number): void,
    (e: 'update:car', value: string) : void,
    (e: 'update:modelValue', value: number): void
  }>()
  // 花钱
  const sub = () => {
    emit('update:money', props.money - 2)
  }

  const changeCar = () => {
    emit('update:car', '小蓝车')
  }

  const changeAge = () => {
    emit('update:modelValue', props.modelValue + 2)
  }

</script>

<template>
  <h3>我是子组件</h3>
  <p>金额 - {{ money }}</p>
  <p>车 - {{ car }}</p>
  <p>年龄 - {{ modelValue }}</p>
  <button @click="sub">花钱</button>
  <button @click="changeCar">一键换车</button>
  <button @click="changeAge">修改年龄</button>
</template>

<style scoped lang="less">

</style>